<template>
  <div class="newlist-box">
    <van-card 
      @click="goNewDetail(item.id)"
      v-for="item in newList"
      :key="item.id"
      :title="item.title"
      :thumb="item.img_url"
    >
      <div slot="price">
        创建时间: {{item.add_time | timeFilter}}
      </div>
      <div slot="num">
        点击次数: {{item.click}}
      </div>
    </van-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newList: [] 
    }
  },
  created() {
    this.getNewList()
  },
  methods: {
    async getNewList() {
      const { data: res } = await this.$http.get('api/getnewslist')
      if(res.status == 1) return this.$toast({
        message: '请求数据失败',
        type: 'fail'
      })

      this.newList = res.message
    },
    goNewDetail(id) {
      this.$router.push(`/newdetail/${id}`)
    }
  }
}
</script>
<style lang="less" scope>
  .newlist-box{
    .van-card{
      .van-card__title{
        max-height: 40px;
        font-weight: 500;
        font-size: 19px;
        line-height: 19px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .van-card__bottom{
        margin-top: 10px;
        color: #1989fa;
        .van-card__price{
          color: #1989fa;
        }
      }
    }
  }
  .van-image__error, .van-image__img, .van-image__loading{
    object-fit: cover!important;
  }
</style>